<template>
    <div class="">
        <!-- 添加弹窗 -->
        <el-dialog title="添加" :close-on-click-modal="false" v-model="dialogVisible" :before-close="handleClose"
            style="padding: 50px; width: 600px;;">
            <el-form :rules="addFormRules" label-width="auto">

                <el-form-item label="费用类型" prop="type">
                    <el-select clearable v-model="addparams.type" placeholder="请选择状态">
                        <el-option label="物业费" value="物业费" />
                        <el-option label="垃圾处理费" value="垃圾处理费" />
                    </el-select>
                </el-form-item>
                <el-form-item label="金额" prop="price">
                    <el-input v-model="addparams.price" placeholder="请输入金额" />
                </el-form-item>
                <el-form-item label="账期" prop="begindate">
                    <DateSelect @dateChange="dateChange"></DateSelect>
                </el-form-item>
                <el-form-item label="小区" prop="buildingid">
                    <BuildSelect @update="cascaderChange"></BuildSelect>
                </el-form-item>
                <el-form-item label="" prop="buildType">
                    <el-radio-group v-model="buildType" @change="radioChange">
                        <el-radio value="1">全部房屋</el-radio>
                        <el-radio value="0" @click="showhouse">部分房屋</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <el-form-item v-if="buildType == 0">
                <el-table :data="houses" style="width: 100%">
                    <el-table-column prop="building" label="楼栋" />
                    <el-table-column fixed prop="houseno" label="房间号" width="100" />
                    <el-table-column label="操作" width="80">
                        <template #default="scope">
                            <el-button @click="delHouse(scope.row.id)" type="danger" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitAdd">确认</el-button>
        </el-dialog>
        <FeeAddHouse v-if="housedialogVisible" @close="houseClose" @selectChange="selectHouse"></FeeAddHouse>
    </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from "vue"
import BuildSelect from "./BuildSelect.vue";
import DateSelect from "./DateSelect.vue";
import { ElMessage } from 'element-plus'
import FeeAddHouse from "./FeeAddHouse.vue";
import { addfee } from "../service/fee/add";

const housedialogVisible = ref(false)

const buildType = ref()

const houses = ref()


//添加
const submitAdd = async () => {
    console.log(addparams);
    let res:any = await addfee(addparams)
    if (res.errCode == 10000) {
        ElMessage.success(res.errMsg)
        dialogVisible.value = false
    } else {
        ElMessage.error(res.errMsg)
    }
}
//获取选择房屋
const selectHouse = (e: any) => {
    houses.value = e
    houses.value.forEach((item: { id: number; }) => {
        addparams.houseids.push(item.id)
    });
}
//删除已选房屋
const delHouse = (id: number) => {
    houses.value = houses.value.filter((item: any) => item.id !== id)
    addparams.houseids = addparams.houseids.filter((item: any) => item !== id)
}
defineProps({
    buildinglist: {
        type: [Object],
        default: () => ({})
    },
})

//添加页面显示
const dialogVisible = ref(true)
const emit = defineEmits(['close'])
const handleClose = () => {
    dialogVisible.value = false
    emit('close', [])
}
const houseClose = () => {
    housedialogVisible.value = false
}

//选择房屋
const radioChange = (e: any) => {
    console.log(e)
    if (!addparams.buildingid) {
        return ElMessage.error('请选择楼栋');
    }
}
//展示房屋
const showhouse = () => {
    if (buildType.value == 0) {
        if (!addparams.buildingid) {
            return ElMessage.error('请选择楼栋');
        }
        housedialogVisible.value = true
    }
}
//日期改变
const dateChange = (e: any) => {
    if (!e) {
        addparams.begindate = "";
        addparams.enddate = "";
    }
    else {
        addparams.begindate = e[0];
        addparams.enddate = e[1];
    }
}
//楼栋改变
const cascaderChange = (e: any) => {
    if (!e) addparams.buildingid = null;
    else {
        addparams.buildingid = e[e.length - 1];
    }
}

export interface addType {
    type: string | null;
    begindate: string | null;
    enddate: string | null;
    price: number | null;
    buildingid: number | null;
    houseids: number[];
}
const addparams = reactive<addType>({
    type: null,
    price: null,
    houseids: [],
    begindate: null,
    enddate: null,
    buildingid: 0,
})

//表单验证
// 自定义表单验证
// const ruleFormRef = ref<FormInstance>()
// const validatePass = (rule: any, value: any, callback: any) => {
//     callback(new Error('请选择房间'))
// }
const addFormRules = reactive({
    // type: [{ required: true, message: '请输入费用类型', trigger: 'blur' }],
    // begindate: [{ required: true, message: '请输入开始时间', trigger: 'blur' }],
    // price: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
    // buildingid: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
    // buildType: [{ validator: validatePass, trigger: 'blur' }]
})



</script>


<style scoped lang="less"></style>
